import React, { Component } from 'react'
import { NavBar, Icon, SearchBar } from "antd-mobile"
import "./searchCenter.css"
import myaxios from "../../utils/myaxios"
import { withRouter } from "react-router-dom"
class searchCenter extends Component {

    state = {
        inputVal: "",
        productList: []
    }

    getProductList = (params) => {
        myaxios.get("goods/qsearch", {
            params: {
                query: this.state.inputVal
            }
        }).then((res) => {
            this.setState({
                productList: res
            })
        })
    }

    ListClick = (e) => {
        let good_id = e.target.getAttribute("data-goods_id")
        this.props.history.push("/goodDetail/" + good_id)
    }

    render() {
        return (
            <div className="searchCenter">
                {/* 搜索中心导航开始 */}
                <NavBar
                    className="searchCenter-nav"
                    mode="light"
                    icon={<Icon type="left"></Icon>}
                    onLeftClick={() => window.history.go(-1)}
                >搜索中心</NavBar>
                {/* 搜索中心导航结束 */}
                {/* 搜索框开始 */}
                <SearchBar
                    className="searchCenter-Search"
                    placeholder="搜索"
                    value={this.state.inputVal}
                    onCancel={() => this.getProductList()}
                    showCancelButton
                    cancelText="搜索"
                    onChange={(value) => {
                        console.log(value)
                        this.setState({
                            inputVal: value
                        })
                    }}
                ></SearchBar>
                {/* 搜索框结束 */}
                {/* 列表开始 */}
                <div className="searchCenter-list" onClick={this.ListClick}>
                    {this.state.productList.map((v) => {
                        return (
                            <div className="list-item" key={v.goods_id} data-goods_id={v.goods_id}>
                                <img src="" alt=""/>
                                {v.goods_name}
                            </div>
                        )
                    })}
                </div>
                {/* 列表结束 */}
            </div>
        )
    }
}
export default withRouter(searchCenter)